<template>
  <div class="common-layout">
    <el-container>
      <el-header>
	  </el-header>
      <el-main>
		  <div class="blue">
			  <div class="Progress_bar">
			  	<el-steps style="max-width: 1000px" :active="currentStep">
			  	  <el-step title="步骤 1" description="选择投诉单位" />
			  	  <el-step title="步骤 2" description="提交投诉信息" />
			  	  <el-step title="步骤 3" description="投诉受理进行" />
			  	</el-steps>
			  </div>
		  </div>
		<div class="form">  
		<div  v-if="currentStep === 1">
		        <div class="form-title">请选择您要投诉的单位</div>  
		        <div class="form-content">  
		          <el-select  
		            v-model="target"  
		            default-first-option  
		            :reserve-keyword="false"  
		             placeholder="请选择投诉部门"
		            style="width: 500px; border: 2px solid #517cf7; border-radius: 4.5px;"  
		          >  
		            <el-option  
		              v-for="item in options"  
		              :key="item.value"  
		              :label="item.label"  
		              :value="item.value"  
		            />  
		          </el-select>  
		        </div>  
		        <div class="form-action">  
		          <el-button style="height: 50px;width: 300px;" @click="nextStep">下一步</el-button>  
		        </div>  
				  <el-image :src="photo1" fit="cover" class="back-img" style="height: 100%;" /> 
		      </div>
			
			  <div v-if="currentStep === 2" class="form-step2">  
			        <div class="form-title">提交投诉信息</div>   
			        <el-input  resize="none" style="width: 500px;margin-left: 200px;" type="textarea"   placeholder="请输入投诉详情" v-model="complaintDetails" rows=10></el-input>  
			        <el-button @click="prevStep" style="width: 150px;margin-left: 370px;margin-top: 30px;">上一步</el-button>  
			        <el-button type="primary" @click="submitComplaint" style="width: 150px;margin-left: 370px;">提交</el-button>  
			      </div> 
				   <div v-if="currentStep === 3" class="form-step2">
				         <div class="form-title"></div>  
				           <el-image :src="photo" fit="cover" class="back-img" style="height: 100%;" /> 
				          <el-button type="primary" style="width: 150px;margin-left: 360px;margin-top:30px;" @click="{currentStep = 1; target = ''; complaintDetails = ''}">再次投诉</el-button>  
				    </div>
				</div>
	  </el-main>
    </el-container>
  </div>
</template>
<script setup>  
import { ref ,reactive } from 'vue';
import { Path } from '@/constant/index'
import { get,post} from "@/plugins/axios" 
import { ElMessage } from 'element-plus';
const photo = '../../../public/complaint.png';  
const photo1 = '../../../public/complaint1.png';  
const target = ref('');  
const currentStep = ref(1); 
const complaintDetails = ref(''); 
const options = [  
  { value: '物业', label: '物业' },  
  { value: '安保', label: '安保' },  
  { value: '超市', label: '超市'},
]; 

function prevStep() {  
  if (currentStep.value > 1) {  
    currentStep.value--;  
  }  
}  

function nextStep() {  
  if (currentStep.value < 3) {  
		if(currentStep.value == 1){
			if(target.value == ''){
				ElMessage.warning("请选择投诉部分")
			} else {
				currentStep.value++; 
			}
		}
  }
}  
  
function submitComplaint() {  
  if(complaintDetails.value != ''){
		post(Path.complainAdd ,{target:target.value,content:complaintDetails.value},content => {
			currentStep.value++
		})	
	} else {
		ElMessage.warning("请输入您的投内容")
	}
}  
  
</script> 
  
  
<style scoped lang="scss">  
.common-layout{
	  height: 100vh;
.el-header{
	height: 10%;
	.head{
		align-items: center;
		display: flex;
		height: 100px;
		flex-direction: row;
		.logo-img{
			height: 80px;
			margin-left: 12%;;
		}
		.head-context{
			text-align: center;
			margin-left: 20%;
			font-size: 30px;
		}
	}
}
.el-main{
	padding: -13px;
	.blue{
		position: absolute;
		background-color: #303f9e;
		height: 330px;
		width: 68%;
		margin-top: 0;
		display: flex;
		z-index: 1;
		.green{
			background-color: #4fc4ad;
			height: 52px;
			color: aliceblue;
			width: 100px;
			text-align: center;
		padding-top: 5px;
		font-size: 30px;
		margin-left: 200px;
		}
	.Progress_bar{
		width: 700px;
		margin-top: 50px;
		margin-left: 220px;
	}
	}
	.form{
		box-shadow: 5px 5px 15px 5px rgba(99, 99, 99, 0.6); 
		background-color: white;
		position: absolute;
		z-index: 2;
		width: 850px;
		height:500px;
		margin-left:150px ;
		margin-top: 158px;
		.form-title{
			text-align: center;
			font-size: 35px;
			margin-top: 40px;
			color: #8c8c8c;
			
		}
		.form-step2 .el-textarea__inner {  
		  height: 2100px; 
		} 
		
	}
}
::v-deep .el-select__wrapper{
		height: 70px;
}
::v-deep .el-textarea__inner {  
  height: 300px; 
}
}
.form-content {  
  margin-bottom: 40px;  
  margin-left: 160px;
  margin-top: 40px;
}  
  
.form-action {  
  text-align: center; 
  
}  
  


</style>